<template>
  <div class="layout">
    <Layout>
      <Header id="adminHeader" :style="{padding: '0px', minHeight: '50px'}" class="myHeader">
        <Row style="height:100%">
          <i-col span="12" class="left company-info" style="height:100%">
            <img src="../assets/logo.png" style="height:33px;margin:0 5px 0 20px" />
            <span>浙江省环保院业务端</span>
          </i-col>
          <i-col span="12" class="right" style="height:100%">
            <Dropdown style="margin-right:20px" @on-click="(name)=>{this.chekout(name)}">
              <Icon type="md-contacts" />
              <span>{{this.user}}</span>
              <Icon type="ios-arrow-down" />
              <DropdownMenu slot="list">
                <DropdownItem name="editAccount">
                  <Icon type="ios-lock" />修改密码
                </DropdownItem>
                <DropdownItem name="checkout">
                  <Icon type="ios-exit" />退出登录
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Modal title="修改用户信息" v-model="edit" width="30%" >
              <Form :model="formInline" inline>
                <div>
                  <FormItem prop="user">
                    <Input type="text" v-model="formInline.user" placeholder="Username">
                      <Icon type="ios-person-outline" slot="prepend"></Icon>
                    </Input>
                  </FormItem>
                  <FormItem prop="btn">
                    <Button type="primary" @click="editPwd">修改密码</Button>
                  <Button v-if="!test" type="warning" @click="cancelPwd">取消修改</Button>
                  </FormItem>
                  <!-- <Button type="primary" @click="editPwd">修改密码</Button>
                  <Button v-if="!test" type="warning" @click="cancelPwd">取消修改</Button>-->
                </div>
                <Collapse v-if="show" v-model="activeName" accordion>
                  <Panel :disabled="test" name="1">修改密码
                    <div slot="content"><div>
                      <FormItem lebel="旧密码" prop="password">
                        <Input type="password" v-model="formInline.oldPassword" placeholder="旧密码">
                          <Icon type="ios-lock-outline" slot="prepend"></Icon>
                        </Input>
                      </FormItem>
                    </div>
                    <div>
                      <FormItem lebel="新密码" prop="password">
                        <Input type="password" v-model="formInline.password" placeholder="新密码">
                          <Icon type="ios-lock-outline" slot="prepend"></Icon>
                        </Input>
                      </FormItem>
                    </div>
                    <div>
                      <FormItem lebel="确认密码" prop="password">
                        <Input
                          type="password"
                          v-model="formInline.checkPassword"
                          placeholder="确认密码"
                        >
                          <Icon type="ios-lock-outline" slot="prepend"></Icon>
                        </Input>
                      </FormItem>
                    </div></div>
                    <!-- <template slot="title">
                      修改密码
                      <i class="header-icon el-icon-info"></i>
                    </template> -->
                    
                  </Panel>
                </Collapse>
                <span>{{ msg }}</span>
              </Form>
              <span slot="footer" class="dialog-footer">
                <Button @click="cancelEdit">取 消</Button>
                <Button type="primary" @click="checkSubmit">确 定</Button>
              </span>
            </Modal>
            <Modal v-model="exit" titile="退出登录" @on-ok="exitOk">
              <div slot="header" style="fontSize:14px;fontWeight:bold">
                <span>退出登录</span>
              </div>
              <div class="center warningInfo">
                <Icon type="ios-alert" class="warnIcon" />确认退出登录吗
              </div>
            </Modal>
          </i-col>
        </Row>
      </Header>
      <Layout>
        <Sider id="adminSider" ref="side1" collapsible :collapsed-width="78" v-model="isCollapsed">
          <!-- <div class="company-info center">
            <span class="center">浙江省环保院</span>
          </div>-->
          <div class="sider">
            <Menu theme="light" active-name="1" width="auto" :class="menuitemClasses">
              <MenuItem name="1">
                <router-link to="/epi/user/bidding">
                  <Icon type="ios-paper" />
                  <span>招投标管理</span>
                </router-link>
              </MenuItem>
              <MenuItem name="2">
                <router-link to="/epi/user/undertake">
                  <Icon type="ios-ribbon-outline" />
                  <span>项目承接</span>
                </router-link>
              </MenuItem>
              <MenuItem name="3">
                <router-link to="/epi/user/organization">
                  <Icon type="ios-document-outline" />
                  <span>项目编制</span>
                </router-link>
              </MenuItem>
              <MenuItem name="4">
                <router-link to="/epi/user/examine">
                  <Icon type="ios-list-box-outline" />
                  <span>项目审定</span>
                </router-link>
              </MenuItem>
              <MenuItem name="5">
                <router-link to="/epi/user/seal">
                  <Icon type="ios-medal-outline" />
                  <span>项目盖章</span>
                </router-link>
              </MenuItem>
              <MenuItem name="6">
                <router-link to="/epi/user/file">
                  <Icon type="ios-folder-open-outline" />
                  <span>项目归档</span>
                </router-link>
              </MenuItem>
              <MenuItem name="7">
                <router-link to="/epi/user/finance">
                  <Icon type="ios-calculator-outline" />
                  <span>财务管理</span>
                </router-link>
              </MenuItem>
              <MenuItem name="8">
                <router-link to="/epi/user/project">
                  <Icon type="ios-keypad-outline" />
                  <span>项目管理</span>
                </router-link>
              </MenuItem>
              <!-- <MenuItem name="9">
                <router-link to="/epi/user/test">
                  <Icon type="ios-keypad-outline" />
                  <span>test</span>
                </router-link>
              </MenuItem> -->
            </Menu>
          </div>
        </Sider>
        <Content id="adminContent" :style="{padding: '20px'}">
          <router-view />
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      show:false,
      siderHeight: document.body.clientHeight,
      isCollapsed: false,
      // isCollapsed: false,
      msgModol: {
        no11: "旧密码不能为空！",
        no21: "新密码不能为空！",
        no22: "新密码位数不能少于6位！",
        no31: "确认密码不能为空！",
        no32: "确认密码与新密码不一致！"
      },
      msg: "",
      test: true,
      theme: "dark",
      activeName: "0",
      user: "",
      exit: false,
      edit: false,
      formInline: {
        user: null,
        password: null,
        oldPassword: null,
        checkPassword: null
      },
      userName: null,
      userDepment: null,
      userID: null,
      userDepmentID: null,
      unchangeUsername: null,
      isname: 0,
      isPwd: 0
    };
  },
  computed: {
    menuitemClasses: function() {
      // console.log(this.isCollapsed);
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    }
  },
  mounted() {
    var sider = document.getElementById("adminSider");
    var content=document.getElementById("adminContent");
        var height= document.documentElement.clientHeight -64
    // console.log("headerHeight:",header.style.height);
    // console.log("height:", height);
    sider.style.height =  height+"px";
        content.style.height=sider.style.height;
  },
  beforeMount() {
    var admin = "";
    admin = this.getCookie("admin");
    // console.info("admin");
    // console.info(admin);
    this.user = admin;
    // console.info("IP");
    // console.log(this.IP.IP);
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      axios({
        method: "get",
        url: this.IP.IP + "/personAndDepartment"
      }).then(result => {
        // console.info("用户信息");
        // console.log(result);
        this.unchangeUsername = result.data.data.username;
        this.userName = result.data.data.username;
        this.userDepment = result.data.data.departmentName;
        this.userID = result.data.data.personId;
        this.userDepmentID = result.data.data.departmentId;
        this.user = result.data.data.personName;
        this.formInline.user = this.userName;
      });
    },
    cancelEdit() {
      this.formInline.password = null;
      this.formInline.oldPassword = null;
      this.formInline.checkPassword = null;
      this.edit = false;
      this.test = true;
      this.activeName = "0";
      this.msg = "";
    },
    cancelPwd() {
      this.show=false;
      this.test = true;
      this.formInline.password = null;
      this.formInline.oldPassword = null;
      this.formInline.checkPassword = null;
      this.activeName = "0";
      this.msg = "";
    },
    editPwd() {
      this.show=true;
      this.test = false;
      this.activeName = "1";
      this.formInline.password = null;
      this.formInline.oldPassword = null;
      this.formInline.checkPassword = null;
    },
    realChangepwd() {
      this.msg = "";
      console.log(
        "old:" +
          this.formInline.oldPassword +
          "  new:" +
          this.formInline.password
      );
      this.$ajax({
        method: "post",
        url: this.IP.IP + "/editPassword",
        data: {
          oldOne: this.formInline.oldPassword,
          newOne: this.formInline.password
        }
      }).then(response => {
        console.log(response);
        var code = null;
        var msg = response.data.msg;
        code = response.data.code;
        if (code == 0) {
          this.isPwd = 1;
          this.edit = false;
          this.$Message.success("修改成功,请重新登录！");
          this.exitOk();
        } else {
          this.msg += msg;
        }
      });
    },
    changeName(flag) {
      this.msg = "";
      this.$ajax({
        method: "post",
        url: this.IP.IP + "/editAccount",
        params: {
          name: this.formInline.user
        }
      })
        .then(response => {
          console.log(response);
          var code = null;
          var msg = response.data.msg;
          code = response.data.code;
          if (code == 0) {
            this.$Message.success("修改成功");
          } else {
            this.$Message.error(msg);
          }
        })
        .catch(error => {
          this.$Message.error(error);
        });
    },
    checkSubmit() {
      this.msg = "";
      var flag = 1;
      if (!this.formInline.user) {
        this.msg += "账号不能为空！";
        flag = 0;
      } else {
        if (this.formInline.user != this.unchangeUsername) {
          flag = 2;
        } else {
          flag = 1;
        }
        if (!this.test) {
          //要改密码
          if (flag == 1) {
            flag = 3;
          } else if (flag == 2) {
            flag = 4;
          }
        }
      }
      if (flag == 2) {
        this.changeName();
        this.$router.go(0);
      } else if (flag == 3) {
        this.handleSubmit(); //只改密码
      } else if (flag == 4) {
        this.changeName(flag);
        this.handleSubmit();
      }
      console.log("密码和账号：" + flag);
    },
    handleSubmit() {
      var flag1 = 0;
      var flag2 = 0;
      var flag3 = 0;
      if (!this.formInline.oldPassword) {
        flag1 = 1;
      }
      if (!this.formInline.password) {
        flag2 = 1;
      } else if (flag2 == 0) {
        var pass = this.formInline.password;
        if (pass.length < 6) {
          flag2 = 2;
        }
      }
      if (!this.formInline.checkPassword) {
        flag3 = 1;
      } else {
        if (this.formInline.checkPassword != this.formInline.password) {
          flag3 = 2;
        }
      }
      console.log("flag3:" + flag3);
      if (flag1 + flag2 + flag3 == 0) {
        this.realChangepwd();
      } else {
        if (flag1 == 1) {
          this.msg += this.msgModol.no11;
        }
        if (flag2 == 1) {
          this.msg += this.msgModol.no21;
        }
        if (flag2 == 2) {
          this.msg += this.msgModol.no22;
        }
        if (flag3 == 1) {
          this.msg += this.msgModol.no31;
        }
        if (flag3 == 2) {
          this.msg += this.msgModol.no32;
        }
      }
      console.log("msg:" + this.msg);
      // this.$Message.error("Fail!");
    },
    chekout(e) {
      console.log("e:" + e);
      if (e == "checkout") {
        this.exit = true;
      } else {
        this.edit = true;
        this.formInline.user = this.userName;
      }
    },
    exitOk() {
      this.exit = false;
      this.$ajax({
        method: "post",
        url: this.IP.IP + "/logout"
      }).then(response => {
        console.log(response);
        var code = "";
        code = response.data.code;
        if (code == 0) {
          setTimeout(() => {
            window.location.href = "/login.html#/";
            // this.$router.push({
            //   path:'/epi/login'
            // });
            // this.$router.go(0);
          }, 2000);
          this.$Message.success(response.data.data);
          // alert(response.data.data);
        } else {
          this.$Message.error(response.data.msg);
          // alert(response.data.msg);
        }
      });
    }
  }
};
</script>
<style scope>
/* @import "../../static/global.css"; 引入公共样式 */
.center{
    display:flex;
    justify-content: center;
    align-items: center;
}
.right{
    display:flex;
    justify-content: flex-end;
    align-items: center
}
.left{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.myHeader{
    /* background: #353b47; */
    color: #ffffff;
    font-size: 15px;
    background: linear-gradient(right, #4cc1bb, #cadf94) !important;
}
.company-info {
    /* width: 200px;
    height:100%;
    line-height: 50px; */
    color: #ffffff;
    font-size: 25px;
    font-weight: bold;
     /* background: #333; */
  }
.sider{
    height: 100%;
    /* background:#353b47 ; */
    background: linear-gradient(30deg, #4cc1bb, #cadf94);
}
.ivu-layout-header {
    background:  #d2f1eb;
}
.headerInfo{
 
    font-size: 14px;
    font-weight: bold;
}
.ivu-table-stripe .ivu-table-body tr:nth-child(2n) td, .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
    background-color: #ebf9ff;
}
.ivu-table th {
    background-color: #ebf9ff;
}
.warningInfo{
    font-size: 30px;
    font-weight: bold;
}
.warnIcon{
    color: #fed279;
    height: 30px;
    margin: 0 5px 0 0;
}
.ivu-layout {
  background: #ffffff;
}

#content {
  padding: 10px 20px 0;
  margin-left: 200px;
  overflow-y: auto;
}

.ivu-menu-item {
  padding: 0 !important;
  line-height: 45px;
  height: 45px;
  text-align: center;
  background-color: none;
}
* .collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
  font-size: 0px;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}

.ivu-menu-item a {
  display: block;
  width: 100%;
  height: 100%;
  color: #72bc87;
  /* color: rgba(255, 255, 255, 0.7); */
}

.ivu-menu-item-selected a {
  color: #639387;
}
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu),
.ivu-menu-dark.ivu-menu-vertical
  .ivu-menu-submenu-title-active:not(.ivu-menu-submenu) {
  border-right: 2px solid #639387;
}
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
  border-right: 2px solid #639387;
}
.ivu-menu-light.ivu-menu-vertical
  .ivu-menu-item-active:not(.ivu-menu-submenu):after {
  background: none;
  border: none;
}
.ivu-layout-sider-trigger {
  background: none;
}
.form-line {
  /*padding设置元素的边内距*/
  padding: 5px;
  margin: 10px 5px;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>